<template>
	<view class="content">
		<view class="task-head">
			<view class="task-steps">
				<view class="task-steps-item" v-for="(item,index) in dateList" :key="index">
					<view class="task-steps-item-icon" :class="[{lastDay:index==6},{onDay:index < dayIndex}]"><image v-if="index == 6" class="task-steps-item-icon-redpack" src="../../../static/icons/jewel/redpack.png"></image></view>
					<view class="task-steps-item-text">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="task-list">
			<view class="task-list-title">每日任务</view>
			<view class="task-list-item" v-for="(item,index) in taskList" :key="index">
				<view class="task-list-item-info">
					<view class="task-list-item-info-name">{{item.task_title_text}}</view>
					<view class="task-list-item-info-state">完成{{item.now_num}}/{{item.finish_num}}</view>
				</view>
				<block v-if="item.task_finish_state == 1">
					<view class="task-list-item-btn task-list-item-state2">已完成</view>
				</block>
				<block v-else-if="item.obtain_state == 1">
					<view class="task-list-item-btn task-list-item-state1" @tap="takeReward(item.id)">领取</view>
				</block>
				<block v-else-if="item.obtain_state == 0">
					<navigator hover-class="none" :url="item.task_url" class="task-list-item-btn">做任务</navigator>
				</block>
			</view>
		</view>
		<view style="width: 100%;height: 50rpx;"></view>
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				signTxt:'签到',
				taskList:[],
				dateList:[],
				dayIndex:0
			}
		},
		methods:{
			getData(){
				let that = this
				jewel.get('jewel_member_task/index', {}, true, function(res){
					that.taskList = res.data.data
					uni.stopPullDownRefresh()
				});
			},
			//领取红包
			takeReward(id){
				let that = this
				jewel.get('jewel_member_task/obtain_task_reward', {id:id}, true, function(res){
					jewel.showToast(res.data.msg,res.data.code==0?1500:3000)
					if(res.data.code == 0){
						that.getData()
					}
				});
			}
		},
		onLoad() {
			let that = this
			jewel.get('member/lianxu', {}, true, function(res){
				that.dayIndex = res.data.data.day
			});
			for(let i = 1;i<8;i++){
				that.dateList.push({
					index:i,
					text:i+'天'
				})
			}
		},
		onShow() {
			this.getData()
		},
		onPullDownRefresh() {
			this.getData()
		}
	}
</script>

<style lang="scss">
	
	.content{
		.task-head{
			background-image: url(../../../static/images/jewel/sign_task_head.png);
			background-size: 100% 100%;
			height: 509rpx;
			display: flex;
			align-items: flex-end;
			.task-steps{
				display: flex;
				align-items: center;
				width: 680rpx;
				margin: 0 auto;
				margin-bottom: 125rpx;
				position: relative;
				z-index: 1;
				&::before{
					content: '';
					position: absolute;
					z-index: -1;
					top: 13rpx;
					left: 40rpx;
					background-color: #FFFFFF;
					height: 4rpx;
					width: 610rpx;
				}
				&-item{
					flex: 1;
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					&-icon{
						width: 28rpx;
						height: 28rpx;
						background-color: #FFFFFF;
						border-radius: 50%;
						margin: 0 auto;
						&-redpack{
							width: 30rpx;
							height: 34rpx;
							margin-top: -2rpx;
						}
					}
					&-text{
						line-height: 65rpx;
					}
					.lastDay{
						position: relative;
						z-index: 1;
						&::before{
							content: '';
							position: absolute;
							width: 52rpx;
							height: 52rpx;
							background-color: #FFFFFF;
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
							border-radius: 50%;
						}
					}
					&:first-child{
						.onDay{
							&::after{
								display: none;
							}
						}
					}
				}
				.onDay{
					background-color: #fed112;
					position: relative;
					z-index: 1;
					&::after{
						content: '';
						position: absolute;
						z-index: -1;
						right: 10rpx;
						top:13rpx;
						width: 100rpx;
						height: 4rpx;
						background-color: #fed112;
					}
					
				}
				
				
			}
		}
		.task-list{
			width: 680rpx;
			margin: 0 auto;
			margin-top: -96rpx;
			box-shadow:0px 5rpx 22rpx rgba(151,151,151,0.18); 
			border-radius: 20rpx;
			padding: 0 36rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			padding-bottom: 30rpx;
			&-title{
				color: #222222;
				font-size: 36rpx;
				line-height: 80rpx;
				padding-top: 15rpx;
				border-bottom: 1px solid #ececec;
				font-weight: bold;
			}
			&-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 140rpx;
				padding: 0 12rpx;
				border-bottom: 1px solid #ececec;
				&-info{
					&-name{
						color: #333333;
						font-size: 32rpx;
						padding-bottom: 4rpx;
					}
					&-state{
						color: #9c9c9c;
						font-size: 26rpx;
					}
				}
				&-btn{
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					border: 2rpx solid #f3a30e;
					text-align: center;
					border-radius: 50rpx;
					font-size: 28rpx;
					color: #f29f08;
				}
				&-state1{
					border-color: #d71511;
					color: #d71511;
				}
				&-state2{
					border-color: #b2b2b2;
					color: #b2b2b2;
				}
			}
		}
	}
	
</style>
